<template>
  <div class="ChatWithAi">
    <div class="chat-box">
      <div v-for="message in messages" :key="message.id" :class="message.type">
        <div v-if="message.type=='bot'">
          <img :src="message.avatar" alt="avatar" class="avatar">
          <strong>{{ message.name }}: </strong> {{ message.text }}
        </div>
        <div v-else>
          {{ message.text }}<strong>: {{ message.name }}</strong>
          <img :src="message.avatar" alt="avatar" class="avatar">
        </div>

      </div>
    </div>
    <input v-model="userInput" @keyup.enter="sendMessage" placeholder="请在这输入你的问题...">
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import {chatWithAiUrl} from "@/common/HttpRequestUrl";
@Component
export default class ChatWithAi extends Vue {

  //  机器人头像
  botHeadPortrait = 'https://img1.baidu.com/it/u=3762998275,2618077829&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  //  用户头像
  userHeadPortrait = 'https://img2.baidu.com/it/u=1788065115,2521019405&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
  messages = [
    {
      id: 1,
      name: 'Bot',
      text: '你好，，我是来自openai的智能语言模型，很高兴为你服务！',
      avatar: this.botHeadPortrait,
      type:"bot"
    }
  ]

  userId = Math.random().toString()
  userInput = ''
  userInputList = []

  sendMessage() {

    this.messages.push({ id: this.messages.length + 1, name: 'You', text: this.userInput,avatar:this.userHeadPortrait,type:'user' })
    this.userInputList.push(this.userInput);
    let thisObj = this
    //  对话框下拉条自动往下滚
    thisObj.$nextTick(() => {
      let chatBox = thisObj.$el.querySelector('.chat-box')
      chatBox.scrollTop = chatBox.scrollHeight
    })
    this.$post(chatWithAiUrl,{prompts:this.userInputList,userId:this.userId}).then(function (res) {
      if ( res.status ) {
        thisObj.messages.push({ id: thisObj.messages.length + 1, name: 'Bot', text: res.data,avatar:thisObj.botHeadPortrait,type:'bot' })
      }else {
        thisObj.$Message.error("ai响应错误，请重试！")
      }
    }).finally(function () {
      //  对话框下拉条自动往下滚
      thisObj.$nextTick(() => {
        let chatBox = thisObj.$el.querySelector('.chat-box')
        chatBox.scrollTop = chatBox.scrollHeight
      })
    })
    this.userInput = ''
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.ChatWithAi {
  background: url('http://img.mp.itc.cn/upload/20161201/94e9c562fe5b497d9e1e3da59db90380.gif') no-repeat center center fixed;
  background-size: cover;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 60px;
}

.chat-box {
  border: 1px solid #d3d3d3;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  height: 70vh;
  margin: 0 auto;
  overflow-y: scroll;
  padding: 10px;
  width: 80%;
  background-color: white;
}

.chat-box strong {
  margin-top: 5px;
  font-size: 18px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.5px;
  color: #4d4d4d;
  text-shadow: 1px 1px #ffffff;
}

.chat-box div {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  align-items: center;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

input {
  border: none;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: block;
  font-size: 16px;
  margin: 20px auto 0;
  padding: 10px 20px;
  width: 80%;
  background-color: white;
}

input:focus {
  outline: none;
  box-shadow: 0 0 10px #a9a9a9;
}

.chat-box strong {
  color: #4d4d4d;
}

.chat-box p {
  margin-top: 5px;
  font-size: 16px;
}

.bot {
  text-align: left;
  color: #ffc800;
}

.user {
  ext-align: right;
  color: #35bbdc;
  justify-content: flex-end;
  align-self: flex-end;
}
</style>
